<template>
    <view class="wrap">
        <view class="fill-wrap">
            <image class="fill-bg" src="../static/lepaiCard/fill-bg.png" mode=""></image>
            <image class="top-pattern" src="../static/lepaiCard/top-pattern.png" mode=""></image>
            <image class="top-title" src="../static/lepaiCard/top-title.png" mode=""></image>
            <image class="content-shadow" src="../static/lepaiCard/content-shadow.png" mode=""></image>
            <view class="main"><image :src="`../static/lepaiCard/content-` + index + `.png`" mode="widthFix" v-for="(item, index) in 10" :key="index"></image></view>
            <image class="logo" src="../static/lepaiCard/logo.png" mode=""></image>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {};
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    computed: {},
    onLoad() {},
    onShow() {},
    methods: {},
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    background: #6b75ff;
    .fill-wrap {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        .fill-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        .top-pattern {
            position: absolute;
            left: 0;
            top: 0;
            width: 750rpx;
            height: 569rpx;
            z-index: 1;
        }
        .top-title {
            position: relative;
            left: 0;
            top: 0;
            z-index: 1;
            width: 671rpx;
            height: 881rpx;
            margin: 67rpx 0 50rpx;
        }
        .content-shadow {
            position: relative;
            left: 0;
            top: 0;
            width: 684rpx;
            height: 233rpx;
        }
        .main {
            position: relative;
            left: 0;
            top: 0;
            z-index: 2;
            width: 684rpx;
            background-color: #ffffff;
            border-radius: 48rpx;
            margin-top: -142rpx;
            image {
                position: relative;
                left: 0;
                top: 0;
                z-index: 222;
                width: 100%;
            }
        }
        .logo {
            width: 167rpx;
            height: 41rpx;
            margin: 48rpx 0;
        }
    }
}
</style>
